<!-- 设备管理 -->
<template>
  <div class="dashboard-container">
    <!-- 搜索框 -->
    <search label="设备编号：" @searchInnerCode="searchFn" />
    <!-- 表格 -->
    <el-card shadow="never">
      <el-row class="btn">
        <el-col>
          <el-button type="warning" style="min-width:80px;height:36px;" @click="addEquipmentType"><i class="el-icon-circle-plus-outline" style="margin-right:5px;" />新建</el-button>
        </el-col>
      </el-row>
      <Table :loading="loading" :table-data="equipmentList" :page="page" :labels="labels">
        <template #image="{scope}">
          <img style="width:24px;height:24px;border-radius: 50%;" :src="scope.image" alt="">
          <!-- {{ scope.image }} -->
        </template>
        <template #operation="{scope}">
          <el-button @click="editEquipmentType(scope)">修改</el-button>
          <el-button style="color:red" plain @click="delFn">删除</el-button>
        </template>
      </Table>
      <page :total="+list.totalCount" :current-page.sync="page.pageIndex" :total-page="+list.totalPage" />
    </el-card>
    <!-- 弹出框 -->
    <addEquipmentDialog v-if="showEquipmentType" :show-equipment-type.sync="showEquipmentType" :title="title" :data="formData" @reset="formData = $event" @updateList="getEquipmenTypetList" />
  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import search from '@/components/equipment/search.vue'
import { getEquipmenTypetList } from '@/api/equipment'
import Table from '@/components/equipment/table'
import page from '@/components/equipment/page'
import addEquipmentDialog from './components/addEquipmentDialog.vue'
import { equipmentTypeDetail } from '@/api/equipment'

export default {
  name: 'EquipmentManagement',
  components: { search, Table, page, addEquipmentDialog },
  props: {
  },
  data() {
    return {
      loading: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      typePage: {
        pageIndex: 1,
        pageSize: 100000
      },
      list: {},
      labels: {
        name: '型号名称',
        model: '型号编码',
        image: '设备图片',
        vmRow: '货道行',
        vmCol: '货道列',
        channelMaxCapacity: '设备容量'
      },
      equipmentList: [],
      showEquipmentType: false,
      title: '',
      formData: {
        name: '',
        model: '',
        vmRow: undefined,
        vmCol: undefined,
        channelMaxCapacity: undefined,
        image: ''
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {
    page: {
      deep: true,
      handler() {
        this.getEquipmenTypetList()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipmenTypetList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    async getEquipmenTypetList() {
      this.loading = true
      const { data } = await getEquipmenTypetList(this.page)
      this.equipmentList = data.currentPageRecords
      console.log(data)
      this.list = data
      this.loading = false
    },
    async searchFn(item) {
      this.page.name = item
      const { data } = await getEquipmenTypetList(this.page)
      this.equipmentList = data.currentPageRecords
      this.list = data
    },
    delFn() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    },
    addEquipmentType() {
      this.title = '新增设备类型'
      this.showEquipmentType = true
    },
    async editEquipmentType(scope) {
      console.log(scope.typeId)
      this.title = '修改设备类型'
      const data = await equipmentTypeDetail(scope.typeId)
      this.formData = data.data
      this.showEquipmentType = true
    }
  }
}
</script>
<style scoped lang='scss'>
  .btn{
    margin-bottom: 20px;
  }
.handle{
  background: #fbf4f0;
  border: none;
  width: 80px;
}
.el-button{
  padding: 0 !important;
  border: none;
}
.cell{
  .el-button--default{
  color: #5f84ff;
}
}
::v-deep .el-dialog__header{
  font-weight: 600;
  span{
    font-size: 16px;
    line-height: 22px;
  }
}
::v-deep .el-dialog {
    border-radius: 10px;
    width: 630px;
}
::v-deep .el-select{
  width: 396px;
}
.el-form-item{
  margin-bottom: 0;
}
.tag{
  display: flex;
  .yellow{
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
  }
  .green{
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);;
  }
  div{
    height: 23px;
    padding: 0 12px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    margin-right: 2px;
  }
}

</style>
